<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dom-获取页面元素-查找节点</title>
</head>
<body>
<div id="div1" class="div100">div1</div>
<div id="div2" class="div100 div300">div2</div>
<div id="div3" class="div200">div3</div>
<div id="div4" class="div200">div4</div>
<input type="button" name="" value="按钮" id="btn"><br>
姓名：<input type="text" name="username" value="" id="username"><br>
密码：<input type="password" name="password" value="" id="password"><br>
性别<input type="radio" name="sex" value="男" id="man">男
<input type="radio" name="sex" value="女" id="woman">女
<script type="text/javascript">
  /**
   * 常用Dom操作
   * 查找页面的标签元素<head>、<body>、<form>等
   * 标签增加、修改、删除等操作
   * 标签的属性相关操作
   * 给标签元素绑定事件（设置当什么时候，做什么事）
   */
  //1.通过id属性值查找标签元素 id不能重复，如果重复，则获取第一个
  //返回具体的一个标签 dom对象（document文档中的一个节点对象）
  var btn = document.getElementById('btn');
  console.log(btn);
  var div1 = document.getElementById('div1');
  console.log(div1);

  //2.通过标签名称获取元素
  //返回一个HTMLCollection集合，是一个类数组的特殊对象。可以直接当作数组使用
  var divs = document.getElementsByTagName('div');  //返回一个类数组对象，能够查找到所有div标签的所有对象
  console.log(divs);
  var inputs = document.getElementsByTagName('input');
  console.log(inputs);

  //3.通过类名 获取 class属性
  //返回一个HTMLCollection集合，是一个类数组的特殊对象。可以直接当作数组使用
  //里面每一个元素，是具体的一个标签
  var divs = document.getElementsByClassName('div100'); //只要包含div100这个类名的标签，都可以查找到
  console.log(divs);

  //4.通过name属性值获取
  //返回一个NodeList节点列表，是一个类数组的特殊对象。可以直接当作数组使用
  //里面每一个元素，是具体的一个标签
  var inputs = document.getElementsByName('sex');
  console.log(inputs);

  //5.H5提供方法 根据选择器 获取元素
  //document.querySelector() document.querySelectorAll();
  //选择器 css里面的选择器  #usernam .div100  div  input[name=username] p,a
  //querySelectorAll 返回一个NodeList节点列表，是一个类数组的特殊对象。可以直接当作数组使用
  //里面每一个元素，是具体的一个标签
  var divs = document.querySelectorAll('div');
  console.log(divs);
  //querySlector  返回一个具体的标签； 如果有多个满足，则只返回第一个
  var div = document.querySelector('div');
  console.log(div);
  var div = document.querySelector('#div1');
  console.log("#div = " + div);
  var divs = document.querySelectorAll('.div100');
  console.log(divs);
</script>
</body>
</html>